<template>
    <div id="login">
            <header>LOGIN ADMIN</header>
            <a-form
                    id="components-form-demo-normal-login"
                    :form="form"
                    class="login-form"
                    @submit="handleSubmit"
            >
                <a-form-item>
                    <a-input
                            v-decorator="[
          'userName',
          { rules: [{ required: true, message: 'Please input your username!' }] },
        ]"
                            placeholder="Username"
                    >
                        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-input
                            v-decorator="[
          'password',
          { rules: [{ required: true, message: 'Please input your Password!' }] },
        ]"
                            type="password"
                            placeholder="Password"
                    >
                        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-checkbox
                            v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
                    >
                        Remember me
                    </a-checkbox>
                    <a class="login-form-forgot" href="">
                        Forgot password
                    </a>
                    <a-button type="primary" html-type="submit" class="login-form-button"  :loading="loading">
                        Log in
                    </a-button>
                    Or
                        <router-link to="register">
                            register now!
                        </router-link>

                </a-form-item>
            </a-form>

    </div>

</template>

<script>
    import axios from 'axios'
    import { postApiQuery , getApiQuery} from "../api/login/index";

    export default {
        data (){
            return {
                loading: false,
            }
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, { name: 'normal_login' });
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault();
                let _self = this;


                getApiQuery().then(res => {
                    console.log(res)
                });

                postApiQuery().then(res => {
                    console.log(res)
                });


                // return;

                this.form.validateFields((err, values) => {
                    if (!err) {
                        _self.loading = true;
                        setTimeout(function () {
                            _self.$router.push({
                                path: '/page/about'
                            });
                        }, 1000);
                        console.log('Received values of form: ', values);
                    }
                });
            },
        },
    };
</script>
<style scoped>
    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }
    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }
    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }


    #login{
        position: absolute;
        height: 300px;
        width: 300px;
        top:50%;
        left: 50%;
        margin:-150px;
    }


    #login header{
        font-size: 1.8rem;
        text-align: center;
        height:80px;
    }
</style>
